import React, { Component } from 'react'
import Twolistbar from './Twolistbar'
// import hufu from "../../images/hufu.jpg"
// import caizhuang from "../../images/caizhuang.jpg"
// import xiangfen from "../../images/xiangfen.jpg"
// import jiu from "../../images/jiu.jpg"
// import guojiu from "../../images/guojiu.jpg"
// import jinpin from "../../images/jinpin.jpg"
// import baihuo from "../../images/baihuo.jpg"
// import muying from "../../images/muying.jpg"
// import zhibo from "../../images/zhibo.jpg"
// import temai from "../../images/temai.jpg"
import "./Flistbar.scss"
import { withRouter } from 'react-router-dom'
import { firstlist, twolist } from "../../utils/api"

class Flistbar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
      arr: [
        // {
        //   name: "活动专区",
        //   list: [
        //     { name: "活动1", pic: temai },
        //     { name: "活动2", pic: temai },
        //     { name: "活动3", pic: temai },
        //     { name: "活动4", pic: temai },
        //     { name: "活动5", pic: temai },
        //     { name: "活动6", pic: temai }

        //   ]
        // },
        // {
        //   name: "品牌",
        //   list: [
        //     { name: "品牌1", pic: zhibo },
        //     { name: "品牌2", pic: zhibo },
        //     { name: "品牌3", pic: zhibo },
        //     { name: "品牌4", pic: zhibo },
        //     { name: "品牌5", pic: zhibo },
        //     { name: "品牌6", pic: zhibo }

        //   ]
        // },
        // {
        //   name: "美容护肤",
        //   list: [
        //     { name: "美容护肤1", pic: hufu },
        //     { name: "美容护肤2", pic: hufu },
        //     { name: "美容护肤3", pic: hufu },
        //     { name: "美容护肤4", pic: hufu },
        //     { name: "美容护肤5", pic: hufu },
        //     { name: "美容护肤6", pic: hufu }

        //   ]
        // },
        // {
        //   name: "彩妆",
        //   list: [
        //     { name: "彩妆1", pic: caizhuang },
        //     { name: "彩妆2", pic: caizhuang },
        //     { name: "彩妆3", pic: caizhuang },
        //     { name: "彩妆4", pic: caizhuang },
        //     { name: "彩妆5", pic: caizhuang },
        //     { name: "彩妆6", pic: caizhuang }

        //   ]
        // },
        // {
        //   name: "香水",
        //   list: [
        //     { name: "香水1", pic: xiangfen },
        //     { name: "香水2", pic: xiangfen },
        //     { name: "香水3", pic: xiangfen },
        //     { name: "香水4", pic: xiangfen },
        //     { name: "香水5", pic: xiangfen },
        //     { name: "香水6", pic: xiangfen }

        //   ]
        // },
        // {
        //   name: "酒类",
        //   list: [
        //     { name: "酒类1", pic: jiu },
        //     { name: "酒类2", pic: guojiu },
        //     { name: "酒类3", pic: jiu },
        //     { name: "酒类4", pic: guojiu },
        //     { name: "酒类5", pic: jiu },
        //     { name: "酒类6", pic: guojiu }

        //   ]
        // },
        // {
        //   name: "腕表首饰",
        //   list: [
        //     { name: "腕表首饰1", pic: jinpin },
        //     { name: "腕表首饰2", pic: jinpin },
        //     { name: "腕表首饰3", pic: jinpin },
        //     { name: "腕表首饰4", pic: jinpin },
        //     { name: "腕表首饰5", pic: jinpin },
        //     { name: "腕表首饰6", pic: jinpin }

        //   ]
        // },
        // {
        //   name: "服饰箱包",
        //   list: [
        //     { name: "服饰箱包1", pic: baihuo },
        //     { name: "服饰箱包2", pic: baihuo },
        //     { name: "服饰箱包3", pic: baihuo },
        //     { name: "服饰箱包4", pic: baihuo },
        //     { name: "服饰箱包5", pic: baihuo },
        //     { name: "服饰箱包6", pic: baihuo }

        //   ]
        // },
        // {
        //   name: "食品保健",
        //   list: [
        //     { name: "食品保健1", pic: muying },
        //     { name: "食品保健2", pic: muying },
        //     { name: "食品保健3", pic: muying },
        //     { name: "食品保健4", pic: muying },
        //     { name: "食品保健5", pic: muying },
        //     { name: "食品保健6", pic: muying }

        //   ]
        // },

      ],
      brr: [],
      crr: []
    }


  }

  componentDidMount() {
    firstlist().then((ok) => {

      this.setState({ arr: ok.data.list }, () => {
        console.log(this.state.arr)
      })
      // this.state.arr = ok.data.list

    })

    twolist({ id: 225510 }).then((ok) => {
      this.setState({ brr: ok.data.subcate.subcategory }, () => {
        console.log(this.state.brr)
      })
      this.setState({ crr: ok.data.subcate.billboards }, () => {
        console.log(this.state.crr)
      })
    })

  }

  fun(v, i) {
    this.setState({
      currentIndex: i
    }, () => {
      console.log(this.state.arr[i].id)

    })
    twolist({ id: v.id }).then((ok) => {
      // console.log(ok.data)
      this.setState({ brr: ok.data.subcate.subcategory }, () => {
        console.log(this.state.brr)
      })
      this.setState({ crr: ok.data.subcate.billboards }, () => {
        console.log(this.state.crr)
      })
    })
  }


  render() {
    return (
      <div className='listbox'>
        <div className="left">
          {
            this.state.arr.map((v, i) => {
              return (
                <div className={`chickbox ${this.state.currentIndex === i ? "chicked" : ""}`} onClick={() => { this.fun(v, i) }}>{v.name}</div>
              )
            })
          }
        </div>
        <div className="right">
        <Twolistbar billboards={this.state.crr} subcategory={this.state.brr}></Twolistbar>

        </div>
      </div>
    )
  }
}


export default withRouter(Flistbar)